<template>
	<div class="createByType">
		<div class="header vux-1px-b" v-show="false">
			<div @click="colseWin" class="iconfont back-icon">&#xe624;</div>
			选择类型
		</div>
		<div class="split" v-show="isWeChat"></div>
		<div class="content" id="heade">
			<div class="content-item" @click="getCreateStatu('shiti')">
				<div class="title title2">实体商户</div>
				<div class="desc"><p>用于服务类O2O类企业及线下门店 推荐线下门店及美团、点评商户使用</p></div>
				<div class="iconfont link-icon">&#xe62d;</div>
			</div>
			<div v-for="(item,index) in types" class="content-item" @click="getCreateStatu(cate[index].cid)" v-if="index != 0">
				<div class="title title3">{{item.title}}</div>
				<div class="desc"><p>{{item.desc}}</p></div>
				<div class="iconfont link-icon">&#xe62d;</div>
			</div>
			<!--<div class="content-item" @click="getCreateStatu(4)">
				<div class="title title5" ></div>
				<div class="desc"><p></p></div>
				<div class="iconfont link-icon">&#xe62d;</div>
			</div>
			<div class="content-item" @click="getCreateStatu(0)">
				<div class="title title1"></div>
				<div class="desc"><p></p></div>
				<div class="iconfont link-icon">&#xe62d;</div>
			</div>
			<div class="content-item" @click="getCreateStatu(2)">
				<div class="title title4"></div>
				<div class="desc"></div>
				<div class="iconfont link-icon">&#xe62d;</div>
			</div>			-->
		</div>
		<transition name="fade">
			<login @close="closeDailog" :param="param" @closeP="logSucc" v-show="isLogin"></login>
		</transition>
	</div>
</template>

<script>
	import Login from './login'
	import {getUrlParam}  from '@/assets/js/getUrlParam'
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	export default{
		name : 'createByType',
		data(){
			return{
				isWeChat : true,
				cate     : [],
				isLogin  : false,
				status   : '',
				froms    : '',
				param    : '',
				types    : [
					{
						title : '',
						desc  : '',
						id    : ''
					},
					{
						title : '线上电商',
						desc  : '打造售卖实体及虚拟商品 推荐天猫等平台',
						id    : ''
					},
					{
						title : '原厂直销',
						desc  : '适合厂家、工厂批发/直销等企业。',
						id    : ''
					},
					{
						title : '媒体运营',
						desc  : '用于媒体内容发布,将内容和流量进行变现,推荐公众号及头条号、百家号等自媒体使用。',
						id    : ''
					},
					{
						title : '个人自用',
						desc  : '自己的个性空间、组建自己的圈子',
						id    : ''
					}					
				]
			}
		},
		watch:{
			status(){
				if(this.status === 'success'){					
					this.getStoreCate()					
					this.status = ''
				}				
			}
		},
		methods:{
			goCreate(index){

			},
			getStoreCate(){
				let info = {
					userinfo : this.getParams()
				}
				if(!info){
					return
				}
				this.$vux.loading.show({text: '加载中'})
				this.$axiosPost('/api/onlinestore/getStoreType',{
					data : JSON.stringify(info)
				}).then( res => {
					this.$vux.loading.hide()
					if(res && res.code != 404){						
						this.cate = res
						this.cate.forEach((item,index) => {
							if(index > 0){
								this.types[index].id = item.cid
							}
						})
						
					}
				})
			},
			logSucc(status,froms){
				this.status = status
				this.froms  = froms
			},
			closeDailog(){
				this.isLogin = false
			},
			getParams(){
				let userinfo = {
					uid   : getUrlParam('uid') || getCookie('uid'),
					token : getUrlParam('token') || getCookie('token')
				}
				console.log(userinfo)
				return userinfo
			},
			colseWin(){
//				let u = navigator.userAgent;
//			    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android终端
//			    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios
//			    if(isAndroid) {
//			        window.WebView.finish()
//			    } else if (isiOS) {
//			        window.location.href = 'mofing://exitbrowser';
//			    }	
				this.$router.go(-1)
			},
			isWeiXin(){
				let agent = navigator.userAgent.toLowerCase();
			    if (agent.match(/MicroMessenger/i) == "micromessenger") {
			       	this.isWeChat = false
			       	document.getElementById('heade').style.marginTop = .2 + 'rem'
			    } else {
			        this.isWeChat = true
			    }
			},
			//先判断登录，后获取状态
			getCreateStatu(type){
				//this.index = index
				let params = this.urlParams()
				if(!params){
					return
				}
				if(type === 'shiti'){
					this.$router.push('/createStore')
				}else{
					this.$router.push({path:'/selfOpen',query:{type:type}})
				}				
//				let info = {
//					userinfo : params
//				}
//				this.$axiosPost('/api/onlinestore/getStoreAppStatus',{
//					data : JSON.stringify(info)
//				}).then( res => {
//					if(index === 1){
//						if(res.code == 2){
//							this.$router.push('/createStore')
//						}else if(res.code == 0){
//							this.$router.push({path:'/examine',query:{status:res.code,fromin:'create'}})
//						}else if(res.code == -1){
//							this.$router.push({path:'/examine',query:{status:res.code,fromin:'create',reason:res.reason}})
//						}else if(res.code == 1){
//							this.$router.push({path:'/examine',query:{status:res.code,fromin:'create'}})
//						}
//					}
//					if(index !== 1){
//						if(res.code == 2){
//
//						}else if(res.code == 0){
//							this.$router.push({path:'/examine',query:{status:res.code,fromin:'self'}})
//						}else if(res.code == -1){
//							this.$router.push({path:'/examine',query:{status:res.code,fromin:'self',reason:res.reason}})
//						}else if(res.code == 1){
//							this.$router.push({path:'/examine',query:{status:res.code,fromin:'self'}})
//						}
//					}
//				})
			},
			toStore(type){
				this.$router.push({path:'/coinShopList',query:{type:type}})
			},
			urlParams(){
				let urlInfo = {
					uid   : getUrlParam('uid')   || getCookie('uid'),
					token : getUrlParam('token') || getCookie('token')
				}
				if(!this.isWeChat){
					if(!urlInfo.uid || !urlInfo.token){
						this.isLogin = true
						return false
					}
				}
				return urlInfo
			},
		},
		mounted(){
			removeCookie('key')
			document.title = '选择类型'
			this.getStoreCate()
			this.isWeiXin()
		},
		components:{
			Login
		}
	}
</script>

<style lang="less" scoped> 
	@import '~styles/mixin.less';
	@import '~vux/src/styles/1px.less';
	.createByType{
		text-align: left;
		.header{
			z-index:99;
			position: fixed;
			top:0;
			left:0;
			right:0;
			height: 1.44rem;
			line-height: 2rem;
			text-align: center;
			font-size: .36rem;
			background:#f7f7f8;
			.iphonex;
			.back-icon{
				position: absolute;
				top: .54rem;
				height: .9rem;
				line-height: .9rem;
				padding: 0 .2rem;
			}
		}
		/*.split{
			height: 1.44rem;
		}*/
		.content{
			margin-top: .1rem;
			.content-item{
				overflow: hidden;
				position: relative;
				margin: .1rem auto;
				display: flex;
				width: 90%;
				height: 2rem;
				line-height:2rem;
				border-radius:.1rem;
				background:#fff;				
				.title{
					text-align: center;
					width: 2rem;
					color: #fff;
					font-size: .32rem;
				}
				.title1{
					background:linear-gradient(top,#fd6d6d,#ee2205);
					background:-webkit-linear-gradient(top,#fd6d6d,#ee2205);
				}
				.title2{
					background:linear-gradient(top,#4ae1fa,#0671ff);
					background:-webkit-linear-gradient(top,#4ae1fa,#0671ff);
				}
				.title3{
					background:linear-gradient(top,#ffdf30,#ff6504);
					background:-webkit-linear-gradient(top,#ffdf30,#ff6504);
				}
				.title4{
					background:linear-gradient(top,#dd49fd,#792af5);
					background:-webkit-linear-gradient(top,#dd49fd,#792af5);
				}
				.title5{
					background:linear-gradient(top,#0658ff,#0017c3);
					background:-webkit-linear-gradient(top,#0658ff,#0017c3);
				}
				.desc{
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					line-height:.32rem;
					padding: 0 .42rem 0 .2rem;
					font-size: .24rem;
				}
				.link-icon{
					height: .24rem;
					width: .24rem;
					line-height: .24rem;
					position: absolute;
					top: 50%;
					right: .15rem;
					margin-top: -.12rem;
					color: #ccc;
				}
			}
			.content-item:nth-of-type(3){
				.title{
				    background:linear-gradient(top,#0658ff,#0017c3);
					background:-webkit-linear-gradient(top,#0658ff,#0017c3);
				}
			}
			.content-item:nth-of-type(4){
				.title{
				    background:linear-gradient(top,#fd6d6d,#ee2205);
					background:-webkit-linear-gradient(top,#fd6d6d,#ee2205);
				}
			}
			.content-item:nth-of-type(5){
				.title{
				    background:linear-gradient(top,#dd49fd,#792af5);
					background:-webkit-linear-gradient(top,#dd49fd,#792af5);
				}
			}
		}
	}
</style>